import React, {Component} from 'react'
import {Link} from 'react-router'
import '../sass/login'
export default class Login extends Component {
  constructor() {
    super()
  }
  render() {
    const {sending, sec, bindMobile, sendCode, url, clearPhone} = this.props

    return (
      <section className="login">
      <div className="logo">
          <img src={require('../images/logo.png')} alt=""/>
      </div>
        <div className="login-form">
            <div className="login-form-input">
                <input ref="tel" maxLength="11" placeholder="请输入手机号" type="tel"/>
                <span onClick={clearPhone.bind(this, this)} className="login-x">
                    <img src={require('../images/x.png')} alt=""/>
                </span>
            </div>
            <div className="login-form-input">
              <input ref="code" className="login-pwd" placeholder="请输入验证码" type="tel"/>
              {!sending ?
                <span className="ablesend" onClick={sendCode.bind(this, this)}>发送验证码</span> :
                <span className="disablesend">{sec}秒重发</span>
              }
            </div>
          <button className="login-form-btn" onClick={bindMobile.bind(this, this, url)}>确认</button>
        </div>
          <div className="login-footer">
              <p>点击确定表示您已经</p>
              <p>阅读并同意 <Link to="/home"> 《彩食鲜商城服务协议》 </Link> </p>
          </div>
      </section>
    )
  }
}
